<template>
  <div class="app-container">
    <div class="background-color: #fff;">
      <!-- 查询 -->
      <div class="filter-container">
        <!-- <el-alert title="温馨提示：1.新增商品时可选统一规格或者多规格，满足商品不同销售属性场景；2.商品销售状态分为销售中且库存足够时才可下单购买" type="warning" show-icon
          class="goodsaletr marginBottom" /> -->
        <el-form :inline="true" class="search-form" label-width="100px">
          <el-row style="display: flex; flex-wrap: wrap">
            <div style="flex: 1">
              <el-form-item label="关键字" style="margin: 5px 0">
                <el-input
                  v-model="searchForm.keywords"
                  placeholder="支持商品名、ID、副标题、编码"
                  clearable
                  style="width: 260px"
                  maxlength="30"
                  show-word-limit
                />
              </el-form-item>
              <el-form-item label="商品类目" style="margin: 5px 0">
                <el-cascader
                  v-model="searchForm.cate_id"
                  :options="categoryList"
                  :props="{
                    checkStrictly: true,
                    value: 'id',
                    label: 'name',
                    children: 'children',
                  }"
                  clearable
                />
              </el-form-item>
              <el-form-item
                label="供应商"
                v-if="searchDisplay"
                style="margin: 5px 0"
              >
                <el-select
                  v-model="searchForm.supplier_id"
                  placeholder="请选择供应商"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in supplierList"
                    :key="index"
                    :label="item.supplier_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="用户标签"
                v-if="searchDisplay"
                style="margin: 5px 0"
              >
                <el-select
                  v-model="searchForm.label_id"
                  multiple
                  placeholder="请选择标签"
                  clearable
                >
                  <el-option-group
                    v-for="group in labelList"
                    :key="group.label"
                    :label="group.category_name"
                  >
                    <el-option
                      v-for="item in group.child"
                      :key="item.id"
                      :label="item.tag_name"
                      :value="item.id"
                    />
                  </el-option-group>
                </el-select>
              </el-form-item>
            </div>
            <div style="padding: 5px 0">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="getListWay"
                  >查询</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resettingWay"
                  >重置</el-button
                >
                <el-button
                  v-if="!searchDisplay"
                  type="warning"
                  icon="el-icon-caret-bottom"
                  @click="searchDisplay = true"
                  >展开</el-button
                >
                <el-button
                  v-else
                  type="warning"
                  icon="el-icon-caret-top"
                  @click="searchDisplay = false"
                  >收起</el-button
                >
              </el-form-item>
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="grouping" style="margin-top: 20px; padding: 0 20px 20px">
      <!-- <div>
        <el-tabs v-model="searchForm.state" style="height: 66px" @tab-click="tabsListWay">
          <el-tab-pane label="全部" name="all" />
          <el-tab-pane label="售罄" name="sellout" />
          <el-tab-pane label="库存预警" name="stock" />
          <el-tab-pane label="回收站" name="del " />
        </el-tabs>
      </div> -->
      <div class="marginBottom">
        <el-row :gutter="20" style="display: flex">
          <el-col>
            <el-button
              v-hasPermi="'goods/add'"
              type="primary"
              size="small"
              icon="el-icon-circle-plus-outline"
              @click="addGoodsWay()"
              >添加商品</el-button
            >
          </el-col>
          <el-col :span="8" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                icon="el-icon-refresh"
                size="mini"
                @click="resettingWay"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button icon="el-icon-s-operation" size="mini"></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            v-loading="loading"
            :data="GoodsLists"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column align="center" type="selection" /> -->
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              align="center"
            >
              <template slot-scope="scope">
                <div v-if="fruit == 'supplier'">
                  {{ scope.row[fruit].supplier_name }}
                </div>
                <!-- {{ scope.row[fruit] }} -->
                <div v-else-if="fruit == 'main_image'">
                  <div style="width: 40px; height: 40px; margin: 0 auto">
                    <el-image
                      v-if="scope.row.main_image"
                      :src="scope.row.main_image"
                      :preview-src-list="[scope.row.main_image]"
                    />
                  </div>
                </div>
                <div v-else-if="fruit == 'thumbnail'">
                  <div style="width: 40px; height: 40px; margin: 0 auto">
                    <el-image
                      v-if="scope.row.thumbnail"
                      :src="scope.row.thumbnail"
                      :preview-src-list="[scope.row.thumbnail]"
                    />
                  </div>
                </div>
                <div v-else-if="fruit == 'type'">
                  <span v-if="scope.row.mer_id == 0">平台商品</span>
                  <span v-else>商户商品</span>
                </div>
                <div v-else>
                  <el-tooltip
                    placement="top-start"
                    :content="scope.row[fruit] + ''"
                  >
                    <div class="one_line_hidden">
                      {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                    </div>
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" label="库存">
              <template slot-scope="scope">
                <span>{{
                  scope.row.product[0] ? scope.row.product[0].inventory : ""
                }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="库存明细">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="inventory_details(scope.row)"
                >
                  库存明细
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" label="上下架">
              <template slot-scope="scope">
                <el-switch
                  v-hasPermi="'goods/status'"
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="goods_idWay(scope.row)"
                />
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="notes" label="备注" /> -->
            <el-table-column
              align="center"
              fixed="right"
              width="240"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <!-- v-hasPermi="'goods/kcbg'" -->
                <!-- <el-button v-if="scope.row.mer_id == 0" type="warning" size="mini"
                  @click="inventoryChangeWay(scope.row)">
                  库存变更
                </el-button> -->
                <el-button type="text" @click="goodsInfoWay(scope.row)">
                  详情
                </el-button>
                <!-- -->
                <el-button
                  v-hasPermi="'goods/edit'"
                  v-if="scope.row.mer_id == 0"
                  type="text"
                  @click="sendgoods(scope.row)"
                >
                  编辑
                </el-button>
                <el-button
                  v-hasPermi="'goods/del'"
                  v-if="scope.row.mer_id == 0"
                  type="text"
                  @click="deleteorder(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col class="marginTop" style="text-align: right">
          <el-pagination
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchForm.count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
    <!-- 详情 -->
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="商品详情"
      size="70%"
      :withHeader="false"
      :visible.sync="goodsInfoDrawer"
      @close="closeditdetail"
      :show-close="true"
    >
      <div style="position: relative; margin-bottom: 0px">
        <div class="drawerTitle">
          <span>商品信息</span>
          <div class="close" @click="closeditdetail">
            <i class="el-icon-close" style="font-size: 24px"></i>
          </div>
        </div>
      </div>
      <el-scrollbar
        wrap-style="overflow-x:hidden;"
        style="height: calc(100vh - 100px)"
      >
        <div v-loading="selectProduct" style="padding: 0 30px">
          <!-- <p class="title">{{ ruleForm.name }}</p>
          <p class="sn">商品副标题：{{ ruleForm.subtitle }}</p>
          <p class="sn">商品编码：{{ ruleForm.bn }}</p> -->
          <div class="infoDiv" style="">
            <div class="img" style="overflow: hidden">
              <el-image
                style="width: 100%; height: 100%"
                :src="main_image.url"
              />
              <!-- <el-image style="width: 40px; height: 40px" :src="ruleForm.main_image" /> -->
            </div>
            <div class="scenter">
              <div class="order_center">
                <div>
                  <div class="orderdetail_item">
                    <p>商品编码：</p>
                    <p>
                      {{ ruleForm.bn ? ruleForm.bn : "--" }}
                    </p>
                  </div>
                  <div class="orderdetail_item">
                    <p>供应商：</p>
                    <p>
                      {{ ruleForm.supplier_id ? ruleForm.supplier_id : "--" }}
                    </p>
                  </div>
                </div>
                <div>
                  <div class="orderdetail_item">
                    <p>商品名称：</p>
                    <div>
                      <el-tooltip
                        placement="top-start"
                        :content="ruleForm.name"
                      >
                        <div
                          style="
                            color: #333;
                            font-weight: 600;
                            width: 200px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                          "
                        >
                          {{ ruleForm.name ? ruleForm.name : "-" }}
                        </div>
                      </el-tooltip>
                    </div>
                    <!-- <p>
                      {{
                      ruleForm.name
                      ? ruleForm.name
                      : "-"
                    }}
                    </p> -->
                  </div>
                  <div class="orderdetail_item">
                    <p>商品类型：</p>
                    <p>
                      {{ ruleForm.type == 1 ? "普通商品" : "虚拟商品" }}
                    </p>
                  </div>
                </div>
                <div>
                  <div class="orderdetail_item">
                    <p>剩余库存：</p>
                    <p>
                      {{ ruleForm.sales ? ruleForm.sales : "0.00" }}
                    </p>
                  </div>
                  <div class="orderdetail_item">
                    <p>商品类目：</p>
                    <p>
                      {{
                        ruleForm.category1_name
                          ? ruleForm.category1_name
                          : "0.00"
                      }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <!--  -->
            <div class="right">
              <div class="order_center">
                <div class="orderdetail_item">
                  <p>上架状态：</p>
                  <p style="color: #567722; font-weight: 550">
                    {{ ruleForm.status == 1 ? "上架中" : "下架中" }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <p>
            <el-button
              v-if="kucunmer_id.mer_id == 0"
              type="warning"
              @click="inventoryChangeWay(kucunmer_id)"
            >
              库存变更
            </el-button>
            <el-button
              v-if="modifyShow"
              type="primary"
              @click="modifyShowCloseWay"
              >取消</el-button
            >
            <el-button type="primary" @click="modifyShowWay">{{
              !modifyShow ? "编辑" : "保存"
            }}</el-button>
          </p>
          <el-tabs v-model="addGoodsTabs">
            <el-tab-pane label="基本信息" name="基本信息">
              <el-form
                ref="ruleForm"
                :rules="rules"
                :model="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="商品名称" prop="name">
                    <el-input
                      v-model="ruleForm.name"
                      maxlength="80"
                      show-word-limit
                      placeholder="请输入商品名称"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="10">
                  <el-form-item label="商品名称" prop="name">
                    <el-tooltip placement="top-start" :content="ruleForm.name">
                      <div
                        style="
                          width: 300px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                        "
                      >
                        {{ ruleForm.name }}
                      </div>
                    </el-tooltip>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="编码" prop="bn">
                    <el-input
                      disabled
                      v-model="ruleForm.bn"
                      onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"
                      maxlength="20"
                      show-word-limit
                      placeholder="请输入商品编码"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="12">
                  <el-form-item label="编码" prop="bn">
                    <span>{{ ruleForm.bn }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="24">
                  <el-form-item label="副标题" prop="subtitle">
                    <el-input
                      v-model="ruleForm.subtitle"
                      maxlength="50"
                      show-word-limit
                      placeholder="请输入商品副标题"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="24">
                  <el-form-item label="副标题" prop="subtitle">
                    <span>{{ ruleForm.subtitle }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="24">
                  <el-form-item label="商品类型" prop="type">
                    <el-radio
                      v-model="ruleForm.type"
                      :label="1"
                      border
                      size="mini"
                      >普通商品</el-radio
                    >
                    <el-radio
                      v-model="ruleForm.type"
                      :label="2"
                      border
                      size="mini"
                      >卡密商品</el-radio
                    >
                    <el-radio
                      v-model="ruleForm.type"
                      :label="3"
                      border
                      size="mini"
                      >虚拟商品</el-radio
                    >
                  </el-form-item>
                </el-col>
                <el-col v-else :span="10">
                  <el-form-item label="商品类型" prop="type">
                    <span v-if="ruleForm.type == 1" size="mini">普通商品</span>
                    <span v-if="ruleForm.type == 2" size="mini">卡密商品</span>
                    <span v-if="ruleForm.type == 3" size="mini">虚拟商品</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="商品标签" prop="goods_label">
                    <el-select
                      v-model="ruleForm.goods_label"
                      multiple
                      placeholder="请选择标签"
                    >
                      <el-option
                        v-for="(item, index) in unitList"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col v-else :span="12">
                  <el-form-item label="商品标签" prop="goods_label">
                    <span
                      v-for="(item, index) in ruleForm.goods_label_name"
                      :key="index"
                      style="margin: 0 10px"
                      size="mini"
                      >{{ item }}</span
                    >
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="商品类目" prop="category_id1">
                    <el-cascader
                      v-model="cate_id"
                      :options="categoryList"
                      :props="{
                        checkStrictly: true,
                        value: 'id',
                        label: 'name',
                        children: 'children',
                      }"
                      clearable
                      @change="cate_idWay"
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="10">
                  <el-form-item label="商品类目" prop="category_id1">
                    <span v-if="ruleForm.category1_name" size="mini">{{
                      ruleForm.category1_name
                    }}</span>
                    <span v-if="ruleForm.category2_name" size="mini"
                      >/{{ ruleForm.category2_name }}</span
                    >
                    <span v-if="ruleForm.category3_name" size="mini"
                      >/{{ ruleForm.category3_name }}</span
                    >
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="商品状态" prop="status">
                    <el-radio v-model="ruleForm.status" :label="1" size="mini"
                      >上架</el-radio
                    >
                    <el-radio v-model="ruleForm.status" :label="0" size="mini"
                      >下架</el-radio
                    >
                  </el-form-item>
                </el-col>
                <el-col v-else :span="12">
                  <el-form-item label="商品状态" prop="status">
                    <span v-if="ruleForm.status == 1" size="mini">已上架</span>
                    <span v-if="ruleForm.status == 0" type="danger" size="mini"
                      >已下架</span
                    >
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="商品排序" prop="sort">
                    <el-input
                      v-model="ruleForm.sort"
                      onkeyup="value=value.replace(/\D/g,'')"
                      maxlength="10"
                      show-word-limit
                      type="text"
                      placeholder="请输入排序"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="商品主图" prop="main_image">
                    <logo-upload
                      :single-file="main_image"
                      :show-file-list="false"
                      accept="image/jpeg, image/png"
                      @uploadCallback="mainImageBack"
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="10">
                  <el-form-item label="商品主图" prop="main_image">
                    <div style="display: flex">
                      <el-image
                        style="width: 60px; height: 60px; margin: 0 10px"
                        :src="main_image.url"
                      />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="缩略图" prop="thumbnail">
                    <logo-upload
                      :single-file="thumbnail"
                      :show-file-list="false"
                      accept="image/jpeg, image/png"
                      @uploadCallback="thumbnailBack"
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="12">
                  <el-form-item label="缩略图" prop="thumbnail">
                    <div style="display: flex">
                      <el-image
                        style="width: 60px; height: 60px; margin: 0 10px"
                        :src="thumbnail.url"
                      />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="24">
                  <el-form-item label="商品轮播" prop="carousel">
                    <logo-upload
                      :file-list="carousel"
                      :show-file-list="true"
                      accept="image/jpeg, image/png"
                      @uploadCallback="carouselBack"
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="24">
                  <el-form-item label="商品轮播" prop="carousel">
                    <div style="display: flex">
                      <el-image
                        v-for="(item, index) in carousel"
                        :key="index"
                        style="width: 60px; height: 60px; margin: 0 10px"
                        :src="item.url"
                      />
                    </div>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="24">
                  <el-form-item label="备注" prop="notes">
                    <el-input
                      v-model="ruleForm.notes"
                      type="textarea"
                      maxlength="200"
                      show-word-limit
                      placeholder="请输入备注"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="24">
                  <el-form-item label="备注" prop="notes">
                    <span>{{ ruleForm.notes ? ruleForm.notes : "无" }}</span>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="销售设置" name="销售设置">
              <el-form
                ref="saleForm"
                :rules="sales"
                :model="saleForm"
                label-width="120px"
                class="demo-ruleForm"
              >
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="销售倍数区间" prop="sales_multiplier">
                    <el-input
                      v-model="saleForm.sales_multiplier"
                      maxlength="3"
                      show-word-limit
                      placeholder="请输入销售倍数区间"
                      clearable
                    />
                    <span
                      style="font-size: 12px; color: #ccc; letter-spacing: 1px"
                      >例:1-5,销量会乘以1-5随机数</span
                    >
                  </el-form-item>
                </el-col>
                <el-col v-else :span="12">
                  <el-form-item label="销售倍数区间" prop="sales_multiplier">
                    <span>{{ saleForm.sales_multiplier }}</span>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="关联用户标签" prop="related_user_tag">
                    <el-select
                      v-model="related_user_tag"
                      multiple
                      placeholder="请选择用户标签"
                    >
                      <el-option-group
                        v-for="group in labelList"
                        :key="group.label"
                        :label="group.category_name"
                      >
                        <el-option
                          v-for="item in group.child"
                          :key="item.id"
                          :label="item.tag_name"
                          :value="item.id"
                        />
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-else>
                  <el-form-item
                    label="关联用户标签"
                    prop="related_user_tag"
                    v-if="
                      related_user_tag_name && related_user_tag_name.length > 0
                    "
                  >
                    <el-tag
                      style="margin: 0 10px"
                      v-for="(item, index) in related_user_tag_name"
                      :key="index"
                      size="mini"
                      >{{ item }}</el-tag
                    >
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="关联用户分组" prop="related_user_group">
                    <el-select
                      clearable
                      v-model="saleForm.related_user_group"
                      placeholder="请选择分组"
                    >
                      <el-option
                        v-for="item in userGroupList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-else>
                  <el-form-item
                    label="关联用户分组"
                    prop="related_user_group"
                    v-if="saleForm.cover_group_name"
                  >
                    <el-tag size="mini">{{ saleForm.cover_group_name }}</el-tag>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="22">
                  <el-form-item label="关联省市区地域" prop="cover_region_json">
                    <el-cascader
                      v-model="cascaderRegList"
                      style="width: 100%"
                      :options="regionList"
                      collapse-tags
                      :props="{
                        multiple: true,
                        value: 'id',
                        label: 'name',
                        children: 'children',
                        checkStrictly: true,
                      }"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col v-else :span="22">
                  <el-form-item
                    label="关联省市区地域"
                    prop="cover_region_json"
                    v-if="
                      saleForm.cover_region_name_list &&
                      saleForm.cover_region_name_list.length > 0
                    "
                  >
                    <el-tag
                      v-for="(item, index) in saleForm.cover_region_name_list"
                      :key="index"
                      style="margin: 0 0 10px 0"
                      size="mini"
                      >{{ item }}</el-tag
                    >
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="是否优选推荐" prop="is_recommendation">
                    <el-radio
                      v-model="saleForm.is_recommendation"
                      label="1"
                      size="mini"
                      >是</el-radio
                    >
                    <el-radio
                      v-model="saleForm.is_recommendation"
                      label="0"
                      size="mini"
                      >否</el-radio
                    >
                  </el-form-item>
                </el-col>
                <el-col v-else :span="12">
                  <el-form-item label="是否优选推荐" prop="is_recommendation">
                    <el-tag v-if="saleForm.is_recommendation == 1" size="mini"
                      >是</el-tag
                    >
                    <el-tag v-else type="danger" size="mini">否</el-tag>
                  </el-form-item>
                </el-col>
                <el-col v-if="modifyShow" :span="12">
                  <el-form-item label="是否限购" prop="is_restricted">
                    <el-radio
                      v-model="saleForm.is_restricted"
                      label="1"
                      size="mini"
                      >是</el-radio
                    >
                    <el-radio
                      v-model="saleForm.is_restricted"
                      label="0"
                      size="mini"
                      >否</el-radio
                    >
                  </el-form-item>
                </el-col>
                <el-col v-else :span="12">
                  <el-form-item label="是否限购" prop="is_restricted">
                    <el-tag v-if="saleForm.is_restricted == 1" size="mini"
                      >是</el-tag
                    >
                    <el-tag v-else type="danger" size="mini">否</el-tag>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="saleForm.is_restricted == 1 && modifyShow"
                  :span="12"
                >
                  <el-form-item
                    label="每日限购数量"
                    prop="daily_purchase_limit"
                  >
                    <el-input
                      v-model="saleForm.daily_purchase_limit"
                      onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入限购数量"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="saleForm.is_restricted == 1 && !modifyShow"
                  :span="12"
                >
                  <el-form-item
                    label="每日限购数量"
                    prop="daily_purchase_limit"
                  >
                    <span>{{ saleForm.daily_purchase_limit }}</span>
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="saleForm.is_restricted == 1 && modifyShow"
                  :span="12"
                >
                  <el-form-item
                    label="用户总限购数量"
                    prop="total_purchase_limit"
                  >
                    <el-input
                      type="number"
                      v-model="saleForm.total_purchase_limit"
                      onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入限购数量"
                      clearable
                    />
                  </el-form-item>
                </el-col>
                <el-col
                  v-if="saleForm.is_restricted == 1 && !modifyShow"
                  :span="12"
                >
                  <el-form-item
                    label="用户总限购数量"
                    prop="total_purchase_limit"
                  >
                    <span>{{ saleForm.total_purchase_limit }}</span>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="库存规格" name="库存规格">
              <el-form
                ref="inventoryForms"
                :rules="inventorys"
                :model="inventoryformData"
                class="demo-ruleForm"
              >
                <el-table
                  v-loading="loading"
                  highlight-current-row
                  :data="inventoryformData.product"
                  :header-cell-style="{
                    'background-color': '#f3f8fe',
                    color: '#606266',
                    height: '50px',
                  }"
                  style="width: 100%"
                >
                  <el-table-column label="规格名称" align="center">
                    <template slot-scope="scope">
                      <el-form-item
                        :rules="[
                          {
                            required: true,
                            validator: quantityspec,
                            trigger: 'blur',
                          },
                        ]"
                        :prop="'product.' + scope.$index + '.sku_name'"
                      >
                        <el-input
                          disabled="false"
                          v-model="scope.row.sku_name"
                          placeholder="请输入"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="商品图片"
                    width="120px"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <file-image
                        v-if="!modifyShow"
                        :single-file="scope.row.image"
                        @uploadCallback="specificationsimageBack"
                      />
                      <el-image
                        v-else
                        style="width: 60px; height: 60px"
                        :src="scope.row.image"
                      ></el-image>
                    </template>
                  </el-table-column>

                  <el-table-column label="单位" align="center">
                    <template slot-scope="scope">
                      <el-form-item
                        :rules="[
                          {
                            required: true,
                            validator: quantityspec,
                            trigger: 'blur',
                          },
                        ]"
                        :prop="'product.' + scope.$index + '.unit'"
                      >
                        <el-input
                          disabled="false"
                          maxlength="5"
                          v-model="scope.row.unit"
                          placeholder="请输入单位"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column label="成本价" align="center">
                    <template slot-scope="scope">
                      <el-form-item
                        :rules="[
                          {
                            required: true,
                            validator: quantityprice,
                            trigger: 'blur',
                          },
                        ]"
                        :prop="'product.' + scope.$index + '.cost_price'"
                      >
                        <el-input
                          disabled="false"
                          placeholder="请输入"
                          v-model="scope.row.cost_price"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <!-- <el-table-column label="原售价" prop="scribe_price"  align="center">
                  <template slot-scope="scope">
                    <el-form-item :rules="[{ required: true, validator: quantityprice, trigger: 'blur' }]" :prop=" 'product.' + scope.$index + '.scribe_price'">
                      <el-input  :disabled="!modifyShow"  placeholder="请输入" v-model.number="scope.row.scribe_price" ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column> -->

                  <el-table-column
                    label="零售价"
                    prop="retail_price"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :rules="[
                          {
                            required: true,
                            validator: quantityprice,
                            trigger: 'blur',
                          },
                        ]"
                        :prop="'product.' + scope.$index + '.retail_price'"
                      >
                        <el-input
                          :disabled="!modifyShow"
                          placeholder="请输入"
                          v-model="scope.row.retail_price"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="初始销量"
                    prop="initial_sales"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :rules="[
                          {
                            required: true,
                            validator: quantitysales,
                            trigger: 'blur',
                          },
                        ]"
                        :prop="'product.' + scope.$index + '.initial_sales'"
                      >
                        <el-input
                          :disabled="!modifyShow"
                          placeholder="请输入"
                          v-model="scope.row.initial_sales"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column label="库存" prop="inventory" align="center">
                    <template slot-scope="scope">
                      <el-form-item
                        :rules="[
                          {
                            required: true,
                            validator: quantitysales,
                            trigger: 'blur',
                          },
                        ]"
                        :prop="'product.' + scope.$index + '.inventory'"
                      >
                        <el-input
                          :disabled="!modifyShow"
                          placeholder="请输入"
                          v-model="scope.row.inventory"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="库存预警"
                    prop="inventory_alert"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-form-item
                        :prop="'product.' + scope.$index + '.inventory_alert'"
                      >
                        <el-input
                          :disabled="!modifyShow"
                          placeholder="请输入"
                          v-model="scope.row.inventory_alert"
                        ></el-input>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <!-- <el-table-column label="是否默认"  align="center">
                  <template  slot-scope="scope">
                    <el-switch :disabled="!modifyShow" :active-value='1' :inactive-value='0' @change="switchdefaultspecifications(scope.row.is_default,scope.row.id)" v-model="scope.row.is_default"
                      active-color="#13ce66" inactive-color="#F5F5F5">
                    </el-switch>
                  </template>
                </el-table-column> -->
                  <el-table-column
                    fixed="right"
                    prop="address"
                    label="操作"
                    align="center"
                  >
                    <template slot-scope="scope">
                      <el-button
                        style="margin-bottom: 15px"
                        @click="paysettingdeit(scope.row)"
                        type="text"
                        >支付设置</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-form>
            </el-tab-pane>

            <el-tab-pane label="运费设置" name="运费设置">
              <el-col :span="22" v-if="modifyShow">
                <el-form
                  ref="logisticsForm"
                  label-width="100px"
                  :model="logisticsForm"
                  :rules="logisticsRules"
                >
                  <el-form-item
                    label="运费设置："
                    prop="shipping_type"
                    style="margin-top: 15px"
                  >
                    <el-radio-group
                      v-model="logisticsForm.shipping_type"
                      @change="shipping_typeChange"
                    >
                      <el-radio :label="1">固定运费</el-radio>
                      <el-radio :label="2">运费模版</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="运费设置："
                    v-if="logisticsForm.shipping_type == 1"
                    prop="shipping_fee"
                  >
                    <el-input
                      type="number"
                      v-model="logisticsForm.shipping_fee"
                      placeholder="请输入运费"
                      style="width: 300px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="运费模版："
                    v-if="logisticsForm.shipping_type == 2"
                    prop="freight_template_id"
                  >
                    <el-select
                      @change="changefreight"
                      v-model="
                        logisticsForm.freight_template_id == 0
                          ? ''
                          : logisticsForm.freight_template_id
                      "
                      placeholder="请选择运费模版"
                      style="width: 510px"
                    >
                      <el-option
                        v-for="item in freight_template"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="22" v-else>
                <el-descriptions>
                  <el-descriptions-item
                    labelClassName="descriptionsLabel"
                    content-class-name="descriptionsLabel"
                    label="运费类别"
                  >
                    <div v-if="logisticsForm.shipping_type == 1">固定邮费</div>
                    <div v-else>运费模板</div>
                  </el-descriptions-item>
                  <el-descriptions-item
                    labelClassName="descriptionsLabel"
                    content-class-name="descriptionsLabel"
                    label="运费"
                  >
                    <div v-if="logisticsForm.shipping_type == 1">
                      {{
                        logisticsForm.shipping_fee
                          ? logisticsForm.shipping_fee
                          : "-"
                      }}
                    </div>
                    <div v-else>
                      {{ logisticsForm.freight_template_name }}
                    </div>
                  </el-descriptions-item>
                </el-descriptions>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="商品详情" name="商品详情">
              <el-form label-width="90px" class="demo-ruleForm">
                <el-col v-if="modifyShow" :span="24">
                  <el-form-item label="商品详情">
                    <editor-text
                      v-model="ruleForm.goods_detail"
                      :height="500"
                      @input="editorclick"
                    />
                    <!-- <tinymce-editor v-if="goods_detailBool" v-model="ruleForm.goods_detail" :height="500" /> -->
                  </el-form-item>
                </el-col>
                <el-col v-else :span="24">
                  <el-form-item label="商品详情">
                    <div style="display: inline-block">
                      <div class="phone">
                        <div class="receiver">
                          <div></div>
                        </div>
                        <div class="html">
                          <el-scrollbar style="height: 746px">
                            <div v-html="Infodetail"></div>
                          </el-scrollbar>
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </el-drawer>
    <!-- // 添加商品弹框 -->
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加商品"
      size="80%"
      :withHeader="false"
      :visible.sync="addGoodsDialog"
      @close="addGoodsClose"
      :show-close="true"
    >
      <div style="position: relative; margin-bottom: 20px">
        <div class="drawerTitle">
          <span>商品信息</span>
          <div class="close" @click="addGoodsClose">
            <i class="el-icon-close" style="font-size: 24px"></i>
          </div>
        </div>
      </div>

      <!--  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="addGoodsDialog" width="800px"
      :before-close="addGoodsClose"> -->
      <el-row :gutter="20">
        <el-form label-width="80px" class="demo-ruleForm">
          <el-col :span="20" style="margin: 0 auto">
            <el-form-item label="选择商品" prop="name">
              <el-select
                v-loading="goodsLoading"
                element-loading-spinner="el-icon-loading"
                v-model="ruleForm.supplier_goods_id"
                style="width: 100%"
                filterable
                remote
                reserve-keyword
                placeholder="请输入商品名称"
                :remote-method="remoteMethodWay"
                @change="selectGoodsWay"
                :loading="selectLoading"
              >
                <el-option
                  v-for="item in goodsList"
                  :key="item.id"
                  :label="item.goods_name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-scrollbar
        wrap-style="overflow-x:hidden;"
        style="height: calc(100vh - 200px)"
      >
        <el-row
          style="margin-left: 20px"
          v-loading="selectProduct"
          :element-loading-text="
            goodLoding ? '正在获取信息' : '请选择商品之后操作'
          "
          :element-loading-spinner="goodLoding ? 'el-icon-loading' : 'none'"
        >
          <el-col :span="24" style="margin: 0 auto">
            <el-tabs v-model="addGoodsTabs">
              <el-tab-pane label="基本信息" name="基本信息">
                <el-form
                  ref="ruleForm"
                  :rules="rules"
                  :model="ruleForm"
                  label-width="90px"
                  class="demo-ruleForm"
                >
                  <el-col :span="11">
                    <el-form-item label="商品名称" prop="name">
                      <el-input
                        v-model="ruleForm.name"
                        maxlength="80"
                        show-word-limit
                        placeholder="请输入商品名称"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="编码" prop="bn">
                      <el-input
                        disabled
                        v-model="ruleForm.bn"
                        onkeyup="value=value.replace(/[^0-9a-zA-Z]/g,'')"
                        maxlength="20"
                        show-word-limit
                        placeholder="请输入商品编码"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="副标题" prop="subtitle">
                      <el-input
                        v-model="ruleForm.subtitle"
                        maxlength="50"
                        show-word-limit
                        placeholder="请输入商品副标题"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="商品类型" prop="type">
                      <el-radio
                        v-model="ruleForm.type"
                        :label="1"
                        border
                        size="mini"
                        >普通商品</el-radio
                      >
                      <el-radio
                        v-model="ruleForm.type"
                        :label="2"
                        border
                        size="mini"
                        >卡密商品</el-radio
                      >
                      <el-radio
                        v-model="ruleForm.type"
                        :label="3"
                        border
                        size="mini"
                        >虚拟商品</el-radio
                      >
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="商品标签" prop="goods_label">
                      <el-select
                        v-model="ruleForm.goods_label"
                        multiple
                        placeholder="请选择标签"
                      >
                        <el-option
                          v-for="(item, index) in unitList"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="商品类目" prop="category_id1">
                      <el-cascader
                        v-model="cate_id"
                        :options="categoryList"
                        :props="{
                          value: 'id',
                          label: 'name',
                          children: 'children',
                        }"
                        @change="cate_idWay"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="商品状态" prop="status">
                      <el-radio-group v-model="ruleForm.status">
                        <el-radio :label="1" size="mini">上架</el-radio>
                        <el-radio :label="0" size="mini">下架</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="商品排序" prop="sort">
                      <el-input
                        v-model="ruleForm.sort"
                        type="text"
                        onkeyup="value=value.replace(/\D/g,'')"
                        maxlength="10"
                        show-word-limit
                        placeholder="请输入排序"
                        clearable
                      />
                    </el-form-item>
                  </el-col>

                  <el-col :span="11">
                    <el-form-item label="商品主图" prop="main_image">
                      <logo-upload
                        :single-file="main_image"
                        :show-file-list="false"
                        accept="image/jpeg, image/png"
                        @uploadCallback="mainImageBack"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="缩略图" prop="thumbnail">
                      <logo-upload
                        :single-file="thumbnail"
                        :show-file-list="false"
                        accept="image/jpeg, image/png"
                        @uploadCallback="thumbnailBack"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="商品轮播" prop="carousel">
                      <logo-upload
                        :file-list="carousel"
                        :show-file-list="true"
                        accept="image/jpeg, image/png"
                        @uploadCallback="carouselBack"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item label="备注" prop="notes">
                      <el-input
                        v-model="ruleForm.notes"
                        type="textarea"
                        maxlength="200"
                        show-word-limit
                        placeholder="请输入备注"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="销售设置" name="销售设置">
                <el-form
                  ref="saleForm"
                  :rules="sales"
                  :model="saleForm"
                  label-width="110px"
                  class="demo-ruleForm"
                >
                  <el-col :span="11">
                    <el-form-item label="销售倍数区间" prop="sales_multiplier">
                      <el-input
                        v-model="saleForm.sales_multiplier"
                        maxlength="3"
                        show-word-limit
                        placeholder="请输入销售倍数区间"
                        clearable
                      />
                      <span
                        style="
                          font-size: 12px;
                          color: #ccc;
                          letter-spacing: 1px;
                        "
                        >例:1-5,销量会乘以1-5随机数</span
                      >
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="关联用户标签" prop="related_user_tag">
                      <el-select
                        v-model="related_user_tag"
                        multiple
                        placeholder="请选择商品标签"
                      >
                        <el-option-group
                          v-for="group in labelList"
                          :key="group.label"
                          :label="group.category_name"
                        >
                          <el-option
                            v-for="item in group.child"
                            :key="item.id"
                            :label="item.tag_name"
                            :value="item.id"
                          />
                        </el-option-group>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item
                      label="关联用户分组"
                      prop="related_user_group"
                    >
                      <el-select
                        clearable
                        v-model="saleForm.related_user_group"
                        placeholder="请选择分组"
                      >
                        <el-option
                          v-for="item in userGroupList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="22">
                    <el-form-item
                      label="关联省市区地域"
                      prop="cover_region_json"
                    >
                      <el-cascader
                        v-model="cascaderRegList"
                        style="width: 100%"
                        :options="regionList"
                        collapse-tags
                        :props="{
                          multiple: true,
                          value: 'id',
                          label: 'name',
                          children: 'children',
                          checkStrictly: true,
                        }"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="是否优选推荐" prop="is_recommendation">
                      <el-radio
                        v-model="saleForm.is_recommendation"
                        label="1"
                        size="mini"
                        >是</el-radio
                      >
                      <el-radio
                        v-model="saleForm.is_recommendation"
                        label="0"
                        size="mini"
                        >否</el-radio
                      >
                    </el-form-item>
                  </el-col>
                  <el-col :span="11">
                    <el-form-item label="是否限购" prop="is_restricted">
                      <el-radio
                        v-model="saleForm.is_restricted"
                        label="1"
                        size="mini"
                        >是</el-radio
                      >
                      <el-radio
                        v-model="saleForm.is_restricted"
                        label="0"
                        size="mini"
                        >否</el-radio
                      >
                    </el-form-item>
                  </el-col>
                  <el-col v-if="saleForm.is_restricted == 1" :span="11">
                    <el-form-item
                      label="每日限购数量"
                      prop="daily_purchase_limit"
                    >
                      <el-input
                        v-model="saleForm.daily_purchase_limit"
                        onkeyup="value=value.replace(/\D/g,'')"
                        placeholder="请输入限购数量"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                  <el-col v-if="saleForm.is_restricted == 1" :span="11">
                    <el-form-item
                      label="用户总限购数量"
                      prop="total_purchase_limit"
                    >
                      <el-input
                        type="number"
                        v-model="saleForm.total_purchase_limit"
                        onkeyup="value=value.replace(/\D/g,'')"
                        placeholder="请输入限购数量"
                        clearable
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="库存规格" name="库存规格">
                <el-form
                  ref="inventoryForm"
                  :model="inventoryformData"
                  :rules="inventorys"
                  inline
                  style="margin: 20px 20px 0 20px"
                >
                  <el-table
                    v-loading="loading"
                    highlight-current-row
                    :data="inventoryformData.product"
                    :header-cell-style="{
                      'background-color': '#f3f8fe',
                      color: '#606266',
                      height: '50px',
                    }"
                    style="width: 100%"
                  >
                    <el-table-column label="规格名称" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          :rules="[
                            {
                              required: true,
                              validator: quantityspec,
                              trigger: 'blur',
                            },
                          ]"
                          :prop="'product.' + scope.$index + '.sku_name'"
                        >
                          <el-input
                            disabled="false"
                            v-model="scope.row.sku_name"
                            placeholder="请输入"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="商品图片"
                      width="120px"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <file-image
                          v-if="modifyShow"
                          :single-file="scope.row.sku_img"
                          @uploadCallback="specificationsimageBack"
                        />
                        <el-image
                          v-else
                          style="width: 60px; height: 60px"
                          :src="scope.row.sku_img"
                        ></el-image>
                      </template>
                    </el-table-column>

                    <el-table-column label="单位" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          :rules="[
                            {
                              required: true,
                              validator: quantityspec,
                              trigger: 'blur',
                            },
                          ]"
                          :prop="'product.' + scope.$index + '.unit'"
                        >
                          <el-input
                            disabled="false"
                            maxlength="5"
                            v-model="scope.row.unit"
                            placeholder="请输入单位"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column label="成本价" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          :rules="[
                            {
                              required: true,
                              validator: quantityprice,
                              trigger: 'blur',
                            },
                          ]"
                          :prop="'product.' + scope.$index + '.cost_price'"
                        >
                          <el-input
                            disabled="false"
                            placeholder="请输入"
                            v-model.number="scope.row.cost_price"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <!-- <el-table-column label="原售价" prop="scribe_price"  align="center">
                  <template slot-scope="scope">
                    <el-form-item :rules="[{ required: true, validator: quantityprice, trigger: 'blur' }]" :prop=" 'product.' + scope.$index + '.scribe_price'">
                      <el-input    placeholder="请输入" v-model="scope.row.scribe_price" ></el-input>
                    </el-form-item>
                  </template>
                </el-table-column> -->

                    <el-table-column
                      label="零售价"
                      prop="retail_price"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          :rules="[
                            {
                              required: true,
                              validator: quantityprice,
                              trigger: 'blur',
                            },
                          ]"
                          :prop="'product.' + scope.$index + '.retail_price'"
                        >
                          <el-input
                            placeholder="请输入"
                            v-model="scope.row.retail_price"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="初始销量"
                      prop="initial_sales"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          :rules="[
                            {
                              required: true,
                              validator: quantitysales,
                              trigger: 'blur',
                            },
                          ]"
                          :prop="'product.' + scope.$index + '.initial_sales'"
                        >
                          <el-input
                            placeholder="请输入"
                            v-model="scope.row.initial_sales"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="库存"
                      prop="inventory"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          :rules="[
                            {
                              required: true,
                              validator: quantitysales,
                              trigger: 'blur',
                            },
                          ]"
                          :prop="'product.' + scope.$index + '.inventory'"
                        >
                          <el-input
                            placeholder="请输入"
                            v-model="scope.row.inventory"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="库存预警"
                      prop="inventory_alert"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'product.' + scope.$index + '.inventory_alert'"
                        >
                          <el-input
                            placeholder="请输入"
                            v-model="scope.row.inventory_alert"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>

                    <!-- <el-table-column label="是否默认"  align="center">
                  <template  slot-scope="scope">
                    <el-switch :active-value='1' :inactive-value='0' @change="switchdefaultspecifications(scope.row.is_default,scope.row.supplier_product_id)" v-model="scope.row.is_default"
                      active-color="#13ce66" inactive-color="#F5F5F5">
                    </el-switch>
                  </template>
                </el-table-column> -->
                    <el-table-column
                      fixed="right"
                      prop="address"
                      label="操作"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <!-- <el-button   @click="addspecifications(scope.row)" style="margin: 5px" type="primary"
                      size="mini" slot="reference">
                      添加
                    </el-button>
                    <el-popconfirm  v-if="inventoryformData.product.length!=1"  title="确定删除该商品规格吗？" @confirm="deleteCoupon(scope.row)">
                    <el-button @click="delspecifications(scope.row)"  style="margin: 5px" type="danger"
                      size="mini" slot="reference">
                      删除
                    </el-button>
                  </el-popconfirm>  -->
                        <el-button
                          style="margin-bottom: 15px"
                          @click="paysetting(scope.row)"
                          type="text"
                          >支付设置</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form>
              </el-tab-pane>

              <el-tab-pane label="运费设置" name="运费设置">
                <el-form
                  ref="logisticsForm"
                  label-width="100px"
                  :model="logisticsForm"
                  :rules="logisticsRules"
                >
                  <el-form-item
                    label="运费设置："
                    prop="shipping_type"
                    style="margin-top: 15px"
                  >
                    <el-radio-group
                      v-model="logisticsForm.shipping_type"
                      @change="shipping_typeChange"
                    >
                      <el-radio :label="1">固定运费</el-radio>
                      <el-radio :label="2">运费模版</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="运费设置："
                    v-if="logisticsForm.shipping_type == 1"
                    prop="shipping_fee"
                  >
                    <el-input
                      type="number"
                      v-model="logisticsForm.shipping_fee"
                      placeholder="请输入运费"
                      style="width: 300px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="运费模版："
                    v-if="logisticsForm.shipping_type == 2"
                    prop="freight_template_id"
                  >
                    <el-select
                      @change="changefreight"
                      v-model="logisticsForm.freight_template_id"
                      placeholder="请选择运费模版"
                      style="width: 510px"
                    >
                      <el-option
                        v-for="item in freight_template"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <!-- <div class="button-box">
                <el-button
                  @click="activeName = 'product_details'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button class="next-button" @click="saveSubmit"
                  >保存</el-button
                >
              </div> -->
              </el-tab-pane>
              <el-tab-pane label="商品详情" name="商品详情">
                <el-form label-width="90px" class="demo-ruleForm">
                  <el-col :span="22">
                    <el-form-item label="商品详情">
                      <editor-text
                        v-model="ruleForm.goods_detail"
                        :height="500"
                        @input="editorclick"
                      />
                      <!-- <tinymce-editor v-if="goods_detailBool" v-model="ruleForm.goods_detail" :height="500" /> -->
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-scrollbar>
      <el-col :span="22" style="text-align: right; padding-right: 30px">
        <el-button @click="addGoodsClose">取 消</el-button>
        <el-button v-if="currentStep != 6" type="primary" @click="nextStepWay"
          >下一步</el-button
        >
        <el-button
          :loading="btnGoodsLoading"
          v-else
          type="primary"
          @click="submitWay"
        >
          提交</el-button
        >
      </el-col>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="addGoodsClose">取 消</el-button>
        <el-button v-if="currentStep !== 4" type="primary" @click="nextStepWay">下一步</el-button>
        <el-button :loading="btnGoodsLoading" v-else type="primary" @click="submitWay">
          提交</el-button>
      </span> -->
    </el-drawer>

    <el-dialog
      :close-on-click-modal="false"
      title="变更库存"
      :visible.sync="dialogInventory"
      width="500px"
      :before-close="dialogInventoryClose"
    >
      <el-row v-loading="loadingInventory" :gutter="20">
        <el-form
          ref="InventoryForms"
          :model="InventoryForms"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-col :span="24">
            <el-form-item label="增减库存">
              <el-radio v-model="InventoryForms.product[0].action" label="inc"
                >增加</el-radio
              >
              <el-radio v-model="InventoryForms.product[0].action" label="dec"
                >减少</el-radio
              >
            </el-form-item>
            <el-form-item label="数量">
              <el-input
                placeholder="请输入数量"
                v-model="InventoryForms.product[0].inventory"
                class="box-content-input"
                type="text"
                maxlength="7"
                show-word-limit
                onkeyup="value=value.replace(/\D/g,'')"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInventoryClose">取 消</el-button>
        <el-button type="primary" @click="submitInventoryWay('InventoryForms')"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 支付设置弹窗 -->
    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="支付设置"
      size="70%"
      :withHeader="false"
      :visible.sync="gradeDialogGrouping"
      @close="gradeCloseDialogGrouping"
      :show-close="true"
    >
      <div style="position: relative">
        <div class="drawerTitle">
          <span>支付设置</span>
          <div class="close" @click="gradeCloseDialogGrouping">
            <i class="el-icon-close" style="font-size: 24px"></i>
          </div>
        </div>
      </div>
      <el-form
        ref="formpay"
        :model="formData"
        :rules="formRules"
        inline
        style="margin: 20px 20px 0 20px"
      >
        <el-table
          :header-cell-style="{
            'background-color': '#f3f8fe',
            color: '#606266',
            height: '50px',
          }"
          ref="multipleTable"
          border
          :data="formData.pay_config"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChanges"
        >
          <el-table-column type="selection" align="center" width="55">
          </el-table-column>
          <el-table-column label="支付类型" align="center" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.pay_type == 1">现金</span>
              <span v-if="scope.row.pay_type == 2">积分</span>
              <span v-if="scope.row.pay_type == 3">提货券</span>
              <span v-if="scope.row.pay_type == 4">现金+积分</span>
              <span v-if="scope.row.pay_type == 5">现金+提货券</span>
              <span v-if="scope.row.pay_type == 6">积分+提货券</span>
              <span v-if="scope.row.pay_type == 7">现金+积分+提货券</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="balance_price"
            label="现金额度(元)"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-col
                v-if="
                  scope.row.pay_type == 1 ||
                  scope.row.pay_type == 4 ||
                  scope.row.pay_type == 5 ||
                  scope.row.pay_type == 7
                "
              >
                <el-form-item
                  :prop="'pay_config.' + scope.$index + '.balance_price'"
                  :rules="[
                    { required: true, validator: quantity, trigger: 'blur' },
                  ]"
                >
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row.balance_price"
                    @change="handleInput(scope.$index, 'balance_price')"
                    :min="0"
                    :max="100000"
                    label=""
                  ></el-input-number>
                  <!-- <el-input min="0" v-model="scope.row.balance_price" type="number" placeholder="请输入现金"
                      @change="handleInput(scope.$index, 'balance_price')"></el-input> -->
                </el-form-item>
              </el-col>
              <el-col v-else> - </el-col>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="积分数量"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-col
                v-if="
                  scope.row.pay_type == 2 ||
                  scope.row.pay_type == 4 ||
                  scope.row.pay_type == 6 ||
                  scope.row.pay_type == 7
                "
              >
                <el-form-item
                  :prop="'pay_config.' + scope.$index + '.integral_price'"
                  :rules="[
                    { required: true, validator: quantity, trigger: 'blur' },
                  ]"
                >
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row.integral_price"
                    @change="handleInput(scope.$index, 'integral_price')"
                    :min="0"
                    :max="100000"
                    label=""
                  ></el-input-number>
                  <!-- <el-input v-model="scope.row.integral_price" type="number" placeholder="请输入积分"
                      @change="handleInput(scope.$index, 'integral_price')"></el-input> -->
                </el-form-item>
              </el-col>
              <el-col v-else> - </el-col>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="提货券数量"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-col
                v-if="
                  scope.row.pay_type == 3 ||
                  scope.row.pay_type == 5 ||
                  scope.row.pay_type == 6 ||
                  scope.row.pay_type == 7
                "
              >
                <el-form-item
                  :prop="'pay_config.' + scope.$index + '.voucher_price'"
                  :rules="[
                    { required: true, validator: quantity, trigger: 'blur' },
                  ]"
                >
                  <el-input-number
                    size="mini"
                    controls-position="right"
                    v-model="scope.row.voucher_price"
                    @change="handleInput(scope.$index, 'voucher_price')"
                    :min="0"
                    :max="100000"
                    label=""
                  ></el-input-number>
                  <!-- <el-input v-model="scope.row.voucher_scale" type="number" placeholder="请输入提货券"
                      @change="handleInput(scope.$index, 'voucher_scale')"></el-input> -->
                </el-form-item>
              </el-col>
              <el-col v-else> - </el-col>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="积分手续费"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              <el-col
                v-if="
                  scope.row.pay_type == 2 ||
                  scope.row.pay_type == 4 ||
                  scope.row.pay_type == 6 ||
                  scope.row.pay_type == 7
                "
              >
                <el-form-item
                  :prop="'pay_config.' + scope.$index + '.integral_scale'"
                  :rules="[
                    { required: true, validator: quantity, trigger: 'blur' },
                  ]"
                >
                  <div style="display: flex; align-items: center">
                    <el-input-number
                      size="mini"
                      controls-position="right"
                      v-model="scope.row.integral_scale"
                      @change="handleInput(scope.$index, 'integral_scale')"
                      :min="0"
                      :max="100"
                      label=""
                    ></el-input-number>
                    <!-- <el-input v-model="scope.row.integral_scale" type="number" placeholder="请输入百分比"
                        @change="handleInput(scope.$index, 'integral_scale')"></el-input> -->
                    <span style="margin-left: 4px">%</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-else> - </el-col>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="提货券手续费"
            align="center"
            width="160"
          >
            <template slot-scope="scope">
              <el-col
                v-if="
                  scope.row.pay_type == 3 ||
                  scope.row.pay_type == 5 ||
                  scope.row.pay_type == 6 ||
                  scope.row.pay_type == 7
                "
              >
                <el-form-item
                  :prop="'pay_config.' + scope.$index + '.voucher_scale'"
                  :rules="[
                    { required: true, validator: quantity, trigger: 'blur' },
                  ]"
                >
                  <div style="display: flex; align-items: center">
                    <el-input-number
                      size="mini"
                      controls-position="right"
                      v-model="scope.row.voucher_scale"
                      @change="handleInput(scope.$index, 'voucher_scale')"
                      :min="0"
                      :max="100"
                      label=""
                    ></el-input-number>
                    <!-- <el-input v-model="scope.row.voucher_price" type="number" placeholder="请输入百分比"
                        @change="handleInput(scope.$index, 'voucher_price')"></el-input> -->
                    <span style="margin-left: 4px">%</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-else> - </el-col>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="是否默认"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <el-switch
                :active-value="1"
                :inactive-value="0"
                @change="
                  switchdefault(scope.row.is_default, scope.row.pay_type)
                "
                v-model="scope.row.is_default"
                active-color="#13ce66"
                inactive-color="#F5F5F5"
              >
              </el-switch>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <el-row>
        <el-col :span="24" style="text-align: center; margin-top: 60px">
          <el-button style="width: 100px" @click="gradeCloseDialogGrouping"
            >取消</el-button
          >
          <el-button
            v-if="addshowbut"
            style="width: 100px"
            type="primary"
            @click="submitForm()"
            >确认</el-button
          >
          <el-button
            v-if="modifyShow"
            style="width: 100px"
            type="primary"
            @click="submitForm()"
            >确认</el-button
          >
        </el-col>
      </el-row>
    </el-drawer>

    <saveInventory ref="refInventory" />
  </div>
</template>

<script>
import {
  getGoodsList,
  getCategoryList,
  addGoodsList,
  delGoodsList,
  GoodsStatusList,
  getGoodsDetail,
  editGoodsList,
  GoodsStockList,
} from "@/api/commodity/index";
import {
  getTagCategoryAll,
  getgroupList,
  getRegionList,
} from "@/api/user/index";
import {
  getsupplierAll,
  getLabelList,
  getSupplierGoodsInfo,
  freightgetList,
  goodslist,
} from "@/api/supplier/index";
import { getDictionaryTypeList } from "@/api/index";
import LogoUpload from "@/components/FileUpload";
import FileImage from "@/components/fileimage";

import TinymceEditor from "@/components/Tinymce";
import saveInventory from "./components/inventory.vue";
const tableTheadOption = {
  id: {
    label: "ID",
    field: "id",
  },
  supplier_id: {
    label: "供应商ID",
    field: "supplier_id",
  },
  supplier: {
    label: "所属供应商",
    field: "supplier",
  },
  mer_name: {
    label: "所属商铺",
    field: "mer_name",
  },
  name: {
    label: "商品名称",
    field: "name",
  },
  main_image: {
    label: "商品主图",
    field: "main_image",
  },
  thumbnail: {
    label: "缩略图",
    field: "thumbnail",
  },
  sales: {
    label: "商品销量",
    field: "sales",
  },
  type: {
    label: "商品类型",
    field: "type",
  },
  sort: {
    label: "排序",
    field: "sort",
  },
  subtitle: {
    label: "副标题",
    field: "subtitle",
  },
  notes: {
    label: "备注",
    field: "notes",
  },
  bn: {
    label: "编码",
    field: "bn",
  },
};
const allTableThead = [
  "id",
  "mer_name",
  "supplier",
  "supplier_id",
  "name",
  "sort",
  "bn",
  "main_image",
  "thumbnail",
  "type",
  "sales",
  "notes",
];
const defaultTableThead = ["id", "name", "mer_name", "main_image", "sales"];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  name: "Orderlist",
  components: {
    LogoUpload,
    FileImage,
    TinymceEditor,
    saveInventory,
  },
  data() {
    return {
      gradeDialogGrouping: false, //支付设置弹窗
      //支付设置
      formData: {
        pay_config: [
          {
            pay_type: 1,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 2,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 3,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 4,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 5,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 6,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 7,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
        ],
      },
      // 表单数据
      formRules: {}, // 表单验证规则
      quantity: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入内容"));
        } else {
          let req = /^\d+(\.\d{1,2})?$/;

          if (req.test(value)) {
            if (
              rule.field.search("voucher_scale") !== -1 ||
              rule.field.search("integral_scale") !== -1
            ) {
              if (Number(value) > 100) {
                callback(new Error("不能大于100"));
              } else if (Number(value) < 0) {
                callback(new Error("不能小于0"));
              } else {
                callback();
              }
            } else {
              callback();
            }
          } else {
            callback(new Error("保留两位小数"));
          }
        }
      },
      // 商品规格验证规则
      quantityspec: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入内容"));
        } else {
          callback();
        }
      },

      quantityprice: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入"));
        } else {
          let req = /^\d{1,6}(\.\d{1,2})?$/;
          if (req.test(value)) {
            callback();
          } else {
            callback(new Error("最多6位整数和2位小数"));
          }
        }
      },
      quantitysales: (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入内容"));
        } else {
          let req = /^\d{1,7}$/;
          if (req.test(value)) {
            callback();
          } else {
            callback(new Error("最多7位整数"));
          }
        }
      },
      multipleTable: [], //支付勾选数据
      kucunmer_id: {},
      loading: false,
      // 当前搜索是否展开
      searchDisplay: false,
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      // 添加确认按钮开关
      addshowbut: false,
      // 商品列表加载框
      loading: false,
      // 商品列表
      GoodsLists: [],
      // 商品列表总条数
      total: 0,
      // 商品类目列表
      categoryList: [],
      // 商品供应商列表
      supplierList: [],
      // 商品标签列表
      labelList: [],
      // 供应商商品列表
      goodsList: [],
      // 商品单位列表
      unitList: [],
      // 支付类型列表
      payTypeList: [],
      // 商品类型区分列表
      distinguishList: [],
      // 用户分组列表
      userGroupList: [],
      // 省市区列表
      regionList: [],
      // 搜搜参数
      searchForm: {
        keywords: "",
        cate_id: "",
        supplier_id: "",
        label_id: "",
        page: 1,
        count: 10,
        state: "all",
      },
      // 添加商品弹框控制器
      addGoodsDialog: false,
      // 添加商品按钮提示框
      btnGoodsLoading: false,
      // 添加商品参数
      ruleForm: {
        supplier_id: "",
        supplier_goods_id: "",
        name: "",
        bn: "",
        subtitle: "",
        type: "",
        goods_label: [],
        cate_id: "",
        status: "",
        sort: "",
        main_image: "",
        thumbnail: "",
        carousel: "",
        notes: "",
        category_id1: "",
        category_id2: "",
        goods_detail: "",
      },
      rules: {
        name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("商品名称不能为空"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        bn: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("商品编码不能为空"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        subtitle: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("商品副标题不能为空"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择商品类型"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        goods_label: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value.length == 0) {
                callback(new Error("请选择商品标签"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        category_id1: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择商品类目"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请选择商品状态"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("商品排序不能为空"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        main_image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.main_image == {}) {
                callback(new Error("请上传商品主图"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        thumbnail: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.thumbnail == {}) {
                callback(new Error("请选择商品缩略图"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        carousel: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.carousel.length == 0) {
                callback(new Error("请上传至少一张商品轮播图"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      // 添加商品规格
      inventoryformData: {
        product: [
          // {
          //   sku_name:'',
          //   unit:'',
          //   cost_price:'',
          //   retail_price:'',
          //   initial_sales:'',
          //   inventory:'',
          //   inventory_alert:'',
          //   is_default:'',
          //   image: "",
          // }
        ],
      },
      // 添加商品库存规格参数
      inventoryForm: {
        image: "",
        initial_sales: "",
        scribe_price: 0,
        retail_price: "",
        cost_price: "",
        inventory: "",
        sku: "",
        sku_name: "",
        inventory_alert: "",
        unit: "",
      },
      inventorys: {
        // image: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (!this.image.url) {
        //       callback(new Error("请上传图片"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "blur",
        // }, ],
        // initial_sales: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "") {
        //       callback(new Error("请输入初始销量"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "blur",
        // }, ],
        // scribe_price: [
        //   {
        //     required: true,
        //     validator: (rule, value, callback) => {
        //       if (!value) {
        //         callback(new Error("请输入原售价"));
        //       } else {
        //         let req = /^\d+(\.\d{1,2})?$/;
        //         if (req.test(value)) {
        //           callback();
        //         } else {
        //           callback(new Error("最多只能保留两位小数"));
        //         }
        //       }
        //     },
        //     trigger: "change",
        //   },
        // ],
        // retail_price: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "") {
        //       callback(new Error("请输入零售价"));
        //     } else {
        //       let req = /^\d+(\.\d{1,2})?$/;
        //       if (req.test(value)) {
        //         callback();
        //       } else {
        //         callback(new Error("最多只能保留两位小数"));
        //       }
        //     }
        //   },
        //   trigger: "change",
        // }, ],
        // cost_price: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "") {
        //       callback(new Error("请输入成本价"));
        //     } else {
        //       let req = /^\d+(\.\d{1,2})?$/;
        //       if (req.test(value)) {
        //         callback();
        //       } else {
        //         callback(new Error("最多只能保留两位小数"));
        //       }
        //     }
        //   },
        //   trigger: "change",
        // }, ],
        // inventory: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "") {
        //       callback(new Error("请输入库存"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "blur",
        // }, ],
        // sku: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "") {
        //       callback(new Error("请输入sku"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "blur",
        // }, ],
        // sku_name: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "" || value == "null" || value == null) {
        //       callback(new Error("请输入规格名称"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "blur",
        // }, ],
        // inventory_alert: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "") {
        //       callback(new Error("请输入库存预警"));
        //     } else {
        //       if (Number(value) > Number(this.inventoryForm.inventory)) {
        //         callback(new Error("库存预警数量不能大于库存总量"));
        //       }
        //       callback();
        //     }
        //   },
        //   trigger: "change",
        // }, ],
        // unit: [{
        //   required: true,
        //   validator: (rule, value, callback) => {
        //     if (value === "") {
        //       callback(new Error("请输入单位"));
        //     } else {
        //       callback();
        //     }
        //   },
        //   trigger: "blur",
        // }, ],
      },
      // 支付设置参数
      payForm: {
        type: "",
        balance_price: 0,
        balance_scale: 0,
        integral_price: 0,
        integral_scale: 0,
        voucher_price: 0,
        voucher_scale: 0,
      },
      pays: {
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择类型"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        balance_price: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (
                this.payForm.type == 1 ||
                this.payForm.type == 5 ||
                this.payForm.type == 6 ||
                this.payForm.type == 7
              ) {
                if (!value) {
                  callback(new Error("请输入金额"));
                } else {
                  let req = /^\d+(\.\d{1,2})?$/;
                  if (req.test(value)) {
                    callback();
                  } else {
                    callback(new Error("最多只能保留两位小数"));
                  }
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        // balance_scale: [
        //   {
        //     required: false,
        //     validator: (rule, value, callback) => {
        //       if (
        //         this.payForm.type == 1 ||
        //         this.payForm.type == 5 ||
        //         this.payForm.type == 6 ||
        //         this.payForm.type == 7
        //       ) {
        //         if (value <= 0) {
        //           callback(new Error("请输入余额手续费"));
        //         } else {
        //           if (Number(value) > 101) {
        //             callback(new Error("手续费最大为100"));
        //           }
        //           callback();
        //         }
        //       } else {
        //         callback();
        //       }
        //     },
        //     trigger: "change",
        //   },
        // ],
        integral_price: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (
                this.payForm.type == 2 ||
                this.payForm.type == 4 ||
                this.payForm.type == 5 ||
                this.payForm.type == 7
              ) {
                if (value <= 0) {
                  callback(new Error("请输入所需积分数量"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        integral_scale: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (
                this.payForm.type == 2 ||
                this.payForm.type == 4 ||
                this.payForm.type == 5 ||
                this.payForm.type == 7
              ) {
                if (value < 0) {
                  callback(new Error("请输入积分手续费"));
                } else {
                  if (Number(value) > 101) {
                    callback(new Error("手续费最大为100"));
                  }
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        voucher_price: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (
                this.payForm.type == 3 ||
                this.payForm.type == 4 ||
                this.payForm.type == 6 ||
                this.payForm.type == 7
              ) {
                if (value <= 0) {
                  callback(new Error("请输入所需提货券数量"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        voucher_scale: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (
                this.payForm.type == 3 ||
                this.payForm.type == 4 ||
                this.payForm.type == 6 ||
                this.payForm.type == 7
              ) {
                if (value < 0) {
                  callback(new Error("请输入提货券手续费"));
                } else {
                  if (Number(value) > 101) {
                    callback(new Error("手续费最大为100"));
                  }
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
      // 销售设置参数
      saleForm: {
        // belong_type: '',
        sales_multiplier: "",
        related_user_tag: "",
        related_user_group: "",
        cover_region_json: "",
        is_recommendation: "0",
        is_restricted: "0",
        daily_purchase_limit: 0,
        total_purchase_limit: 0,
      },
      sales: {
        sales_multiplier: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入销售倍数区间"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        is_recommendation: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择是否优选推荐"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        is_restricted: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请选择是否限购"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        daily_purchase_limit: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (this.saleForm.is_restricted == 1) {
                if (value <= 0) {
                  callback(new Error("每日限购数量不能为空"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        total_purchase_limit: [
          {
            required: false,
            validator: (rule, value, callback) => {
              if (this.saleForm.is_restricted == 1) {
                if (value <= 0) {
                  callback(new Error("用户总限购数量不能为空"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      // 选择商品下拉框加载状态
      selectLoading: false,
      // 添加商品切换商品信息
      addGoodsTabs: "基本信息",
      // 商品标签回显
      related_user_tag: [],
      // 商品类目回显
      cate_id: [],
      // 商品主图回显
      main_image: {},
      //支付设置的id
      allplayid: 0,
      // 商品缩略图回显
      thumbnail: {},
      // 商品轮播图回显
      carousel: [],
      // 添加商品信息中图片回显
      image: {},
      // 添加商品信息中省市区区域回显
      cascaderRegList: [],
      // 关联用户标签名字回显
      related_user_tag_name: [],
      // 原价格回显
      ysjretail_price: 0,
      // 原库存回显
      xyInventory: 0,
      // 是否全部通过验证
      currentStep: 1,
      // 是否选择商品
      selectProduct: true,
      // 商品详情控制器
      goodsInfoDrawer: false, // 详情
      // 商品详情加载控制器
      goodsInfoLoading: false,
      activeNames: "five",
      multipleSelection: [],
      // 详情是否处于编辑模式
      modifyShow: false,
      // 变更库存弹框控制器
      dialogInventory: false,
      // 加载控制
      loadingInventory: false,
      InventoryForms: {
        goods_id: "",
        product: [
          {
            id: "",
            inventory: "",
            action: "inc",
          },
        ],
      },
      title: "",
      goodsLoading: false,
      goodLoding: false,
      // 当前是否显示富文本框
      goods_detailBool: false,
      Infodetail: "",
      //运费模版
      logisticsForm: {
        shipping_type: 1,
        shipping_fee: "",
        freight_template_id: "",
      },
      logisticsRules: {
        shipping_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        freight_template_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请选择运费模版"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        shipping_fee: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请填写运费"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      freight_template: [],
    };
  },
  created() {
    this.getListWay();
    this.getConfigurationWay();
    this.getfrigitlist();
  },
  methods: {
    //提交支付
    submitForm() {
      if (this.multipleTable.length == 0) {
        this.$messages.info("请至少选择一项");
        return;
      }
      let shouldReturn = false;
      if (this.multipleTable.some((item) => item.is_default === 1)) {
        for (let i = 0; i < this.multipleTable.length; i++) {
          const item = this.multipleTable[i];
          if (item.pay_type == 1 && !item.balance_price) {
            this.$messages.info("现金不能为空或0");
            shouldReturn = true;
            break;
          }
          if (item.pay_type == 2 && !item.integral_price) {
            this.$messages.info("积分不能为空或0");
            shouldReturn = true;
            break;
          }
          if (item.pay_type == 3 && !item.voucher_price) {
            this.$messages.info("提货券不能为空或0");
            shouldReturn = true;
            break;
          }
          if (
            item.pay_type == 4 &&
            (!item.balance_price || !item.integral_price)
          ) {
            this.$messages.info("现金+积分类型的值不能为空或0");
            shouldReturn = true;
            break;
          }
          if (
            item.pay_type == 5 &&
            (!item.balance_price || !item.voucher_price)
          ) {
            this.$messages.info("现金+提货券类型的值不能为空或0");
            shouldReturn = true;
            break;
          }
          if (
            item.pay_type == 6 &&
            (!item.voucher_price || !item.integral_price)
          ) {
            this.$messages.info("积分+提货券类型的值不能为空或0");
            shouldReturn = true;
            break;
          }

          if (
            item.pay_type == 7 &&
            !item.balance_price &&
            (!item.voucher_price || !item.integral_price)
          ) {
            this.$messages.info("现金+积分+提货券类型的值不能为空或0");
            shouldReturn = true;
            break;
          }
        }
      } else {
        this.$messages.info("请在勾选里选择一个默认价格");
        shouldReturn = true;
      }

      if (shouldReturn) {
        return;
      }
      this.inventoryformData.product[0].pay_config = this.multipleTable;
      this.gradeCloseDialogGrouping();
    },

    // 商品规格默认状态
    switchdefaultspecifications(e, i) {
      this.inventoryformData.product.forEach((item) => {
        if (e) {
          if (item.id == i) {
          } else {
            item.is_default = !e;
          }
        } else {
          if (item.id == i) {
          } else {
            item.is_default = 0;
          }
        }
      });
    },

    //支付设置切换默认状态
    switchdefault(e, i) {
      this.formData.pay_config.forEach((item) => {
        if (e) {
          if (item.pay_type == i) {
          } else {
            item.is_default = !e;
          }
        } else {
          if (item.pay_type == i) {
          } else {
            item.is_default = 0;
          }
        }
      });
    },
    //打开支付设置弹窗
    paysetting(rows) {
      console.log(rows);
      this.gradeDialogGrouping = true;
      this.addshowbut = true;
      this.allplayid = rows.id;
      this.formData.pay_config[0].balance_price =
        rows.pay_config[0].balance_price;

      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(
          this.formData.pay_config[0],
          true
        );
      });
    },
    //编辑支付设置
    paysettingdeit(rows) {
      this.gradeDialogGrouping = true;
      let selecdata = rows.pay_config;
      this.multipleTable = rows.pay_config;
      this.formData.pay_config.forEach((item, index) => {
        const matchedData = this.multipleTable.find(
          (tableItem) => tableItem.pay_type === item.pay_type
        );
        if (matchedData) {
          this.formData.pay_config[index].balance_price =
            matchedData.balance_price;
          this.formData.pay_config[index].integral_price =
            matchedData.integral_price;
          this.formData.pay_config[index].integral_scale =
            matchedData.integral_scale;
          this.formData.pay_config[index].is_default = matchedData.is_default;
          this.formData.pay_config[index].pay_type = matchedData.pay_type;
          this.formData.pay_config[index].voucher_price =
            matchedData.voucher_price;
          this.formData.pay_config[index].voucher_scale =
            matchedData.voucher_scale;
        }
      });

      console.log(this.formData, "++++++++++++++++++++111++++++++++");

      this.$nextTick(() => {
        selecdata.forEach((item) => {
          let num = item.pay_type;
          this.$refs.multipleTable.toggleRowSelection(
            this.formData.pay_config[num - 1],
            true
          );
        });
      });
    },
    //关闭支付设置弹窗
    gradeCloseDialogGrouping() {
      this.addshowbut = false;
      this.gradeDialogGrouping = false;
      this.formData = {
        pay_config: [
          {
            pay_type: 1,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 2,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 3,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 4,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 5,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 6,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
          {
            pay_type: 7,
            balance_price: 0,
            integral_price: 0,
            integral_scale: 0,
            voucher_price: 0,
            voucher_scale: 0,
            is_default: 0,
          },
        ],
      };

      // this.$refs.formpay.resetFields();
    },
    //验证
    handleInput(index, key) {
      this.$refs.formpay.validateField(key + index); // 实时触发表单验证
    },
    //勾选
    handleSelectionChanges(val) {
      this.multipleTable = val;
    },
    //删除商品规格
    deleteCoupon(row) {
      this.inventoryformData.product = this.inventoryformData.product.filter(
        (item) => item.supplier_product_id !== row.supplier_product_id
      );
    },
    //库存明细
    inventory_details(row) {
      this.$refs.refInventory.open(row);
    },
    //运费设置回调
    shipping_typeChange(val) {
      if (val === 1) {
        this.logisticsForm.freight_template_id = "";
      } else {
        this.logisticsForm.shipping_fee = "";
      }
      this.logisticsForm.shipping_type = val;
    },
    //切换运费模版ID
    changefreight(val) {
      this.logisticsForm.freight_template_id = val;
    },
    //运费模版列表
    getfrigitlist() {
      freightgetList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.freight_template = res.data.list;
      });
    },
    // 商品详情回调
    editorclick(e) {
      this.ruleForm.goods_detail = e;
    },
    // 获取搜索添加所用的所有的列表
    getConfigurationWay() {
      getCategoryList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.categoryList = res.data;
      });
      getsupplierAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.supplierList = res.data;
      });
      getTagCategoryAll().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.labelList = res.data;
      });
      this.goodsLoading = true;
      goodslist({
        page: 1,
        count: 20,
        status: 1,
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.goodsLoading = false;
        this.goodsList = res.data.list;
      });
      getLabelList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.unitList = res.data;
      });
      getDictionaryTypeList({
        type: "pay_type",
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.payTypeList = res.data;
      });
      getDictionaryTypeList({
        type: "goods_distinguish",
      }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.distinguishList = res.data;
      });
      getgroupList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg);
        }
        this.userGroupList = res.data.list;
      });
      if (localStorage.getItem("region")) {
        let regions = JSON.parse(localStorage.getItem("region"));
        this.regionList = regions;
      } else {
        getRegionList().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg);
          }
          this.regionList = res.data;
        });
      }
    },
    //删除商品规格
    delspecifications(data) {
      console.log(data);
    },
    tabsListWay() {
      this.searchForm.page = 1;
      this.searchForm.count = 10;
      this.getListWay();
    },
    // 获取商品列表
    getListWay() {
      this.loading = true;
      getGoodsList(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            return;
          }
          this.GoodsLists = res.data.list;
          this.total = res.data.total;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 列表选中调用
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 重置搜索条件
    resettingWay() {
      this.searchForm = {
        keywords: "",
        cate_id: "",
        supplier_id: "",
        label_id: "",
        page: 1,
        count: 10,
      };
      this.getListWay();
    },
    // 商品上下架
    goods_idWay(row) {
      this.loading = true;
      GoodsStatusList({
        goods_id: row.id,
      })
        .then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.getListWay();
            this.$messages.error(res.msg);
            return;
          }
          this.$messages.success("修改成功");
          this.getListWay();
        })
        .catch(() => {
          this.loading = false;
          this.$messages.warning("修改失败");
          this.getListWay();
        });
    },
    //添加规格
    addspecifications() {
      this.inventoryformData.product.push({
        supplier_product_id:
          this.inventoryformData.product.length + new Date().getTime(),
        sku_name: "",
        unit: "",
        cost_price: "",
        scribe_price: "",
        retail_price: "",
        initial_sales: "",
        inventory: "",
        inventory_alert: "",
        is_default: 0,
        pay_config: [],
        image: {},
      });
    },
    // 添加商品
    addGoodsWay() {
      this.title = "添加商品";
      this.resettingFormWay();
      this.addGoodsDialog = true;
      this.addshowbut = true;
    },
    // 关闭弹框
    addGoodsClose() {
      this.inventoryformData.product = [];
      this.resettingFormWay();
      this.addGoodsDialog = false;
    },
    closeditdetail() {
      this.goodsInfoDrawer = false;
      this.resettingFormWay();
    },
    // 重置表单
    resettingFormWay() {
      this.modifyShow = false;
      this.ruleForm = {
        supplier_id: "",
        supplier_goods_id: "",
        name: "",
        bn: "",
        subtitle: "",
        type: "",
        goods_label: [],
        cate_id: "",
        status: "",
        sort: "",
        main_image: "",
        thumbnail: "",
        carousel: "",
        notes: "",
        category_id1: "",
        category_id2: "",
        goods_detail: "",
      };
      this.inventoryForm = {
        image: "",
        initial_sales: "",
        scribe_price: 0,
        retail_price: "",
        cost_price: "",
        inventory: "",
        sku: "",
        inventory_alert: "",
        unit: "",
        pay_config: [],
      };
      this.payForm = {
        type: "",
        balance_price: 0,
        balance_scale: 0,
        integral_price: 0,
        integral_scale: 0,
        voucher_price: 0,
        voucher_scale: 0,
      };
      this.saleForm = {
        // belong_type: '',
        sales_multiplier: "",
        related_user_tag: "",
        related_user_group: "",
        cover_region_json: "",
        is_recommendation: "0",
        is_restricted: "0",
        daily_purchase_limit: 0,
        total_purchase_limit: 0,
      };
      this.related_user_tag = [];
      this.cate_id = [];
      this.main_image = {};
      this.thumbnail = {};
      this.carousel = [];
      this.image = {};
      this.cascaderRegList = [];
      // 是否选择商品
      this.selectProduct = true;
      this.currentStep = 0;
      this.addGoodsTabs = "基本信息";
      this.goods_detailBool = false;
    },
    // 下拉框搜索调用
    remoteMethodWay(query) {
      if (query !== "") {
        this.selectLoading = true;
        goodslist({
          page: 1,
          count: 20,
          keywords: query,
          status: 1,
        }).then((res) => {
          this.selectLoading = false;
          this.goodsList = res.data.list;
        });
      }
    },
    // 选择商品调用
    selectGoodsWay(val) {
      this.resettingFormWay();
      this.ruleForm.supplier_goods_id = val;
      this.ruleForm.goods_detail = "";
      this.carousel = [];
      this.goodLoding = true;
      getSupplierGoodsInfo({
        id: val,
      }).then((res) => {
        this.goodLoding = false;
        if (res.code !== 200 || res.status !== 1) {
          this.$messages.error(res.msg);
          return;
        }
        this.inventoryformData.product = [];
        this.ruleForm.name = res.data.goods_name;
        this.ruleForm.supplier_id = res.data.supplier_id;
        this.ruleForm.bn = res.data.product_code;
        this.ruleForm.subtitle = res.data.sub_title;
        this.ruleForm.type = res.data.type;
        this.ruleForm.status = Number(res.data.status);
        this.ruleForm.sort = res.data.sort;
        this.$nextTick(() => {
          this.ruleForm.goods_detail = res.data.goods_detail.detail;
          console.log(this.ruleForm.goods_detail, "6999");
          this.goods_detailBool = true;
          this.$forceUpdate();
        });

        this.main_image = {
          url: res.data.main_image,
        };
        this.thumbnail = {
          url: res.data.thumbnail,
        };
        res.data.slider_image.forEach((item) => {
          this.carousel.push({
            url: item,
          });
        });

        this.inventoryForm.image = {
          url: res.data.goods_product[0].sku_img,
        };
        this.xyInventory = res.data.goods_product[0].inventory;
        this.inventoryForm.inventory_alert =
          res.data.goods_product[0].inventory_alert;
        this.inventoryForm.retail_price =
          res.data.goods_product[0].retail_price;

        this.ysjretail_price = res.data.goods_product[0].retail_price;
        this.inventoryForm.cost_price = res.data.goods_product[0].cost_price;

        this.inventoryForm.supplier_product_id = res.data.goods_product[0].id;

        this.inventoryForm.sku_name = res.data.goods_product[0].sku_name;
        this.inventoryForm.unit = res.data.goods_product[0].unit;
        console.log(
          res.data.goods_product,
          "/////////////////*****************"
        );
        this.inventoryformData.product = res.data.goods_product;
        this.inventoryformData.product[0].is_default = 1;
        this.inventoryformData.product[0].scribe_price =
          this.inventoryformData.product[0].retail_price;

        // scribe_price

        this.ruleForm.notes = res.data.remark;
        this.selectProduct = false;
        this.goodLoding = false;
        this.$forceUpdate();
      });
    },
    // 选择商品类目调用
    cate_idWay(vla) {
      if (vla.length !== 2) {
        this.ruleForm.category_id1 = vla[0];
        this.ruleForm.category_id2 = "";
        this.ruleForm.category_id3 = "";
      } else {
        if (vla.length == 3) {
          this.ruleForm.category_id1 = vla[0];
          this.ruleForm.category_id2 = vla[1];
          this.ruleForm.category_id3 = vla[2];
        } else {
          this.ruleForm.category_id1 = vla[0];
          this.ruleForm.category_id2 = vla[1];
          this.ruleForm.category_id3 = "";
        }
      }
    },

    // 商品主图的回调
    mainImageBack(singleFile) {
      this.main_image = singleFile;
    },
    // 商品缩略图的回调
    thumbnailBack(singleFile) {
      this.thumbnail = singleFile;
    },
    // 商品轮播图的回调
    carouselBack() {},
    // 商品图片的回调
    imageBack(singleFile) {
      this.image = singleFile;
    },
    //规格图片的回调
    specificationsimageBack(file) {
      console.log(file);
    },
    // 点击下一步执行
    nextStepWay() {
      var bool = true;
      if (!bool) {
        return false;
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          this.currentStep = 1;
          this.addGoodsTabs = "基本信息";
          // this.$messages.warning("请填写基本信息必填项");
          bool = false;
          return false;
        }
      });
      if (!bool) {
        return false;
      }
      this.$refs.saleForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          this.currentStep = 2;
          this.addGoodsTabs = "销售设置";
          // this.$messages.warning("请填写销售设置必填项");
          bool = false;
          return false;
        }
      });

      if (!bool) {
        return false;
      }
      this.$refs.inventoryForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          this.currentStep = 3;
          this.addGoodsTabs = "库存规格";
          // this.$messages.warning("请填写库存规格必填项");
          bool = false;
          return false;
        }
      });

      if (!bool) {
        return false;
      }
      this.$refs.logisticsForm.validate((valid) => {
        if (valid) {
          return true;
        } else {
          console.log("运费设置");
          this.currentStep = 5;
          this.addGoodsTabs = "运费设置";
          // this.$messages.warning("请填写支付设置必填项");
          bool = false;
          return false;
        }
      });

      if (!bool) {
        return false;
      }
      if (!this.ruleForm.goods_detail) {
        this.currentStep = 6;
        this.addGoodsTabs = "商品详情";
        this.$messages.warning("请填写商品详情");
        return this.$messages.warning("商品详情不能为空");
      } else {
        if (this.addGoodsTabs != "商品详情") {
          this.addGoodsTabs = "商品详情";
          this.currentStep = 6;
        } else {
          this.addGoodsTabs = "商品详情";
          this.currentStep = 6;
        }
      }
      return;
    },
    // 查看商品详情
    goodsInfoWay(row) {
      this.goodsInfoDrawer = true;
      this.goodsInfoLoading = true;
      this.kucunmer_id = JSON.parse(JSON.stringify(row));
      getGoodsDetail({
        goods_id: row.id,
      })
        .then((res) => {
          this.goodsInfoLoading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            return;
          }
          var obj = JSON.parse(JSON.stringify(res.data));

          this.logisticsForm.shipping_type = obj.shipping_type;
          this.logisticsForm.shipping_fee = obj.shipping_fee;
          this.logisticsForm.freight_template_id = obj.freight_template_id;
          this.logisticsForm.freight_template_name = obj.freight_template_name;
          this.ruleForm.id = obj.id;
          this.ruleForm.supplier_id = obj.supplier_id;
          this.ruleForm.name = obj.name;
          this.ruleForm.bn = obj.bn;
          this.ruleForm.subtitle = obj.subtitle;
          this.ruleForm.type = obj.type;
          this.ruleForm.supplier_goods_id = obj.supplier_goods_id;
          this.ruleForm.category1_name = obj.category1_name;
          this.ruleForm.category2_name = obj.category2_name;
          this.ruleForm.category3_name = obj.category3_name;
          this.ruleForm.goods_label_name = obj.goods_label_name;
          var arr1 = [];
          this.ruleForm.goods_label = [];
          arr1 = obj.goods_label.split(",");
          arr1.forEach((item) => {
            this.ruleForm.goods_label.push(Number(item));
          });
          this.ruleForm.status = obj.status;
          this.ruleForm.sort = obj.sort;
          this.ruleForm.notes = obj.notes;
          this.main_image = {
            url: obj.main_image,
          };
          this.thumbnail = {
            url: obj.thumbnail,
          };
          var arr = obj.carousel.split(",");
          this.carousel = [];
          arr.forEach((item) => {
            this.carousel.push({
              url: item,
            });
          });
          this.cate_id = [];
          if (
            obj.category_id3 !== 0 &&
            obj.category_id2 !== 0 &&
            obj.category_id1 !== 0
          ) {
            this.cate_id = [
              obj.category_id1,
              obj.category_id2,
              obj.category_id3,
            ];
          } else if (obj.category_id2 !== 0 && obj.category_id1 !== 0) {
            this.cate_id = [obj.category_id1, obj.category_id2];
          } else if (obj.category_id1 !== 0) {
            this.cate_id = [obj.category_id1];
          } else {
            this.cate_id = [];
          }
          this.ruleForm.category_id1 = obj.category_id1;
          this.ruleForm.category_id2 = obj.category_id2;
          this.ruleForm.category_id3 = obj.category_id3;

          this.saleForm.sales_multiplier = obj.market_info.sales_multiplier;
          this.saleForm.related_user_group = obj.market_info.related_user_group
            ? Number(obj.market_info.related_user_group)
            : "";
          this.saleForm.cover_group_name = obj.market_info.cover_group_name;
          this.saleForm.is_recommendation = String(
            obj.market_info.is_recommendation
          );
          this.saleForm.is_restricted = String(obj.market_info.is_restricted);
          this.saleForm.daily_purchase_limit =
            obj.market_info.daily_purchase_limit;

          this.saleForm.total_purchase_limit =
            obj.market_info.total_purchase_limit;
          this.saleForm.cover_region_name_list =
            obj.market_info.cover_region_name_list;
          if (obj.market_info && obj.market_info.cover_region_json) {
            this.cascaderRegList = JSON.parse(
              obj.market_info.cover_region_json
            );
          }

          this.related_user_tag = [];
          if (obj.market_info.related_user_tag) {
            var arr2 = [];
            arr2 = obj.market_info.related_user_tag.split(",");
            arr2.forEach((item) => {
              this.related_user_tag.push(Number(item));
            });
          }
          this.related_user_tag_name = [];
          if (obj.market_info.cover_label_name) {
            var arr3 = [];
            arr3 = obj.market_info.cover_label_name.split(",");
            arr3.forEach((item) => {
              this.related_user_tag_name.push(item);
            });
          }
          this.inventoryformData.product = obj.product;
          let arrshuzu = [];
          this.inventoryformData.product[0].pay_config.forEach((item) => {
            arrshuzu.push({
              balance_price: item.balance_price,
              integral_price: item.integral_price,
              integral_scale: item.integral_scale,
              is_default: item.is_default,
              pay_type: item.pay_type,
              voucher_price: item.voucher_price,
              voucher_scale: item.voucher_scale,
            });
          });
          this.inventoryformData.product[0].pay_config = arrshuzu;

          // 支付设置
          this.payForm.type = Number(obj.pay_type);
          this.payForm.balance_scale = obj.product[0].pay_config.balance_scale;
          this.payForm.integral_price =
            obj.product[0].pay_config.integral_price;
          this.payForm.integral_scale =
            obj.product[0].pay_config.integral_scale;
          this.payForm.voucher_price = obj.product[0].pay_config.voucher_price;
          this.payForm.voucher_scale = obj.product[0].pay_config.voucher_scale;
          this.payForm.id = obj.product[0].pay_config.id;

          // 商品详情
          this.ruleForm.goods_detail = obj.goods_detail;
          this.Infodetail = obj.goods_detail.replace(
            /<img/g,
            '<img mode="widthFix" style="max-width:100%;"'
          );
          this.Infodetail = this.Infodetail.replace(
            /width: 750px/g,
            "width: 100%"
          );
          this.goods_detailBool = true;
          this.selectProduct = false;
          this.$forceUpdate();
        })
        .catch(() => {
          this.$messages.error("详情获取失败,请重试");
          this.selectProduct = false;
          this.goodsInfoDrawer = false;
          this.goodsInfoLoading = false;
        });
    },
    // 取消编辑模式
    modifyShowCloseWay() {
      this.modifyShow = false;
      this.goodsInfoWay(this.ruleForm);
      this.$refs.inventoryForm.resetFields();
      this.$refs.payForm.resetFields();
      this.$refs.saleForm.resetFields();
      this.$refs.ruleForm.resetFields();
      this.resettingFormWay();
    },
    // 切换显示模式
    modifyShowWay() {
      if (!this.modifyShow) {
        this.modifyShow = true;
        this.$forceUpdate();
        return;
      }
      this.submitWay();
    },
    // 编辑调用
    sendgoods(row) {
      this.goodsInfoDrawer = true;
      this.goodsInfoWay(row);
      this.modifyShow = true;
    },
    // 库存变更调起弹框
    inventoryChangeWay(row) {
      this.InventoryForms = {
        goods_id: row.id,
        product: [
          {
            id: row.product[0].id,
            inventory: "",
            action: "inc",
          },
        ],
      };
      this.dialogInventory = true;
    },
    // 库存变成弹框关闭
    dialogInventoryClose() {
      this.InventoryForms = {
        goods_id: "",
        product: [
          {
            id: "",
            inventory: "",
            action: "inc",
          },
        ],
      };
      this.dialogInventory = false;
    },
    // 库存变更提交
    submitInventoryWay(formName) {
      if (!this.InventoryForms.product[0].inventory) {
        return this.$messages.error("数量不能为空");
      }
      this.loadingInventory = true;
      GoodsStockList(this.InventoryForms)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loadingInventory = false;
            return this.$messages.error(res.msg);
          }
          this.$messages.success("修改成功");
          this.loadingInventory = false;
          this.goodsInfoDrawer = false;
          this.dialogInventoryClose();
          this.getListWay();
        })
        .catch((err) => {
          this.loadingInventory = false;
          this.$messages.error(err.msg);
        });
    },
    // 提交调用
    submitWay() {
      this.ruleForm.main_image = this.main_image.url;
      this.ruleForm.thumbnail = this.thumbnail.url;
      var arr = [];
      this.carousel.forEach((item) => {
        arr.push(item.url);
      });
      this.ruleForm.carousel = arr.toString();
      this.ruleForm.goods_label = this.ruleForm.goods_label.toString();
      this.saleForm.related_user_tag = JSON.parse(
        JSON.stringify(this.related_user_tag)
      ).toString();
      console.log(
        this.inventoryformData.product,
        "11111111111111111111111111111111111111111************************"
      );
      this.saleForm.cover_region_json = JSON.stringify(this.cascaderRegList);
      this.inventoryformData.product.forEach((item) => {
        if (item.sku_img) {
          item["image"] = item.sku_img;
        }
        console.log(this.modifyShow);
        if (this.modifyShow) {
        } else {
          item["supplier_product_id"] = item.id;
        }
      });
      console.log(this.inventoryformData);
      var obj = {
        ...this.logisticsForm,
        // pay_type: this.payForm.type,
        ...this.ruleForm,
        marketing_info: {
          ...this.saleForm,
        },

        product: this.inventoryformData.product,
      };

      this.btnGoodsLoading = true;
      if (!obj.id) {
        delete obj.product[0].id;
        addGoodsList(obj)
          .then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.btnGoodsLoading = false;
              return this.$messages.error(res.msg);
            }
            this.btnGoodsLoading = false;
            this.addGoodsDialog = false;
            this.resettingFormWay();
            this.$messages.success(res.msg);
            this.getListWay();
          })
          .catch(() => {
            this.btnGoodsLoading = false;
          });
      } else {
        editGoodsList(obj)
          .then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.btnGoodsLoading = false;
              return this.$messages.error(res.msg);
            }
            this.btnGoodsLoading = false;
            this.modifyShow = false;
            this.resettingFormWay();
            this.goodsInfoWay(obj);
            this.$messages.success(res.msg);
            this.getListWay();
          })
          .catch(() => {
            this.btnGoodsLoading = false;
          });
      }
    },
    // 删除商品
    deleteorder(row) {
      var _this = this;
      this.$confirm("此操作将永久删除该商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delGoodsList({
            goods_id: row.id,
          })
            .then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                _this.$messages.error(res.msg);
                return;
              }
              _this.$messages({
                type: "success",
                message: "删除成功!",
              });
              _this.getListWay();
            })
            .catch(() => {
              _this.$messages({
                type: "info",
                message: "删除失败",
              });
            });
        })
        .catch(() => {
          _this.$messages({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 添加商品
    goodsadd() {
      this.$router.push("/commodity/goods/add/");
    },

    // 点击搜索
    search() {},
    // 切换订单类型
    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 分页选择调用
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
    // 分页选择调用
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.goodsaletr {
  border-radius: 5px;
  background-color: #f0faff;
  border: 1px solid #abdcff;
  color: #515a6e;
  font-size: 12px !important;
}

.demo-table-expand {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  color: #515a6e;

  div {
    width: 30%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
}

.marginTop {
  padding: 0 15px !important;
}
</style>
<style>
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}

.tox .tox-dialog-wrap__backdrop {
  z-index: 9993 !important;
}

.tox-tinymce-aux {
  z-index: 9990 !important;
}

.tox .tox-dialog {
  z-index: 9995 !important;
}
</style>
<style lang="scss" scoped>
.phone {
  position: relative;
  margin-left: 50%;
  width: 380px;
  height: 800px;
  border: 5px solid #949494;
  border-radius: 40px;
  transform: scale(0.8) translateY(-50px);
}

.phone:before {
  content: "";
  position: absolute;
  width: 369px;
  height: 789px;
  // box-shadow: 0px 0px 24px #000;
  background-color: #000;
  border-radius: 33px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.phone:after {
  content: "";
  position: absolute;
  width: 364px;
  height: 786px;
  background: #fff;
  border-radius: 28px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.html {
  position: absolute;
  width: 364px - 5px - 5px;
  height: 786px - 5px - 5px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  z-index: 1;
}

.receiver {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -50px;
  background: #000000;
  border: #484848 1px solid;
  width: 100px;
  height: 8px;
  z-index: 9;
  border-radius: 20px;
}

.receiver ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: 1px;
  justify-content: space-around;
}

.receiver ul li {
  background: #303030;
  width: 1px;
  height: 1.5px;
  float: left;
  transform: skewX(-38deg);
}

.receiver div {
  width: 100px;
  height: 8px;
}

.receiver div:after {
  content: "";
  display: block;
  width: 95%;
  height: 83%;
  top: 1px;
  left: 3px;
  position: absolute;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(
      to right,
      #434242,
      #000000 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px
    ),
    repeating-linear-gradient(
      to right,
      #434242,
      #19191d 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 3px
    );
  background-size: 100% 50%;
  background-position: 0 0, 2px 4px;
  transform: skew(-25deg);
}

.labelView {
  width: 150px;
}
.infoDiv {
  display: flex;
  // align-items: center;
  background-color: #f5f5f5;
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;

  .img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #fff;
  }
  .right {
  }
  .scenter {
    flex: 1;
    margin-left: 10px;

    h3 {
      line-height: 30px;
      font-weight: 400;
      font-size: 16px;
      padding: 0px 0;
      margin: 0;
    }
  }
}
.orderdetail_item {
  display: flex;
  align-items: center;
  // width: 165px;
  justify-content: start;
  margin-right: 30px;

  p:nth-child(2) {
    color: #000;
    font-weight: 550;
    margin-left: 15px;
  }
}
.order_center {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-wrap: wrap;
  padding: 0 2px 0 0;
  font-size: 13px;
  color: #666;
}
</style>
